import React, {useState, useEffect} from 'react'
import { Modal } from 'antd';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import Chart from './components/chart';
import http from '@utils/http'
import CreateAccountModal from './components/createAccountModal';
import Icon from '@components/icon';
import { EmptyIcon } from '@components/icon/system';
import './styles/index.less'

const Asset = (props) => {
  const [accountList, setAccountList] = useState([]);
  const [statistics, setStatistics] = useState({});
  const [chatData, setChatData] = useState([])
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  const name = searchParams.get('name');

  useEffect(() => {
    getAssetStatistics()
    getAccountList()
    getAssetChartData()
  }, [])

  const getAssetChartData = () => {
    http.get('assetChartData', {
      assetId: id
    }).then(res => {
      if (res.code !== 200) return false
      console.log(res.data)
      setChatData(res.data)
    })
  }

  const getAssetStatistics = () => {
    http.get('assetStatistics', {
      assetId: id
    }).then(res => {
      if (res.code !== 200) return false
      console.log(res.data)
      setStatistics(res.data || {})
    })
  }

  const getAccountList = () => {
    http.get('accountList', {
      assetId: id
    }).then(res => {
      if (res.code !== 200) return false
      console.log(res.data)
      setAccountList(res.data)
    })
  }

  const handleSuccess = () => {
    getAssetStatistics()
    getAccountList()
    getAssetChartData()
  }

  const openCreateAccount = () => {
    Modal.info({
      width: 460,
      modalRender: () => <CreateAccountModal id={id} {...props} onSuccess={() => handleSuccess()} />
    })
  }
  console.log('id', statistics)
  return (
    <>
      <div className="asset-page">
        <div className="asset-header">
          <div className="asset-retreat-button" onClick={() => navigate('/')}></div>
          <div className="breadcrumb">
            <a href="#" onClick={(e) => {e.preventDefault(); navigate('/')}} className="breadcrumb-item">我的资产</a>
            <span className="breadcrumb-item">{name}</span>
          </div>
        </div>
        <div className="asset-main">
          <div className="asset-content">
            <div className="asset-statistics">
              <ul>
                <li>
                  <div className="statistics-title">{id === '2' ? '已用金额' : '账户余额'} </div>
                  <div className="statistics-count amount-family">{statistics.accountBalance || '0.00'}</div>
                </li>
                <li className="divider"></li>
                <li>
                  <div className="statistics-title">{id === '2' ? '总消费额' : '累计资金转入'}</div>
                  <div className="statistics-count amount-family">{statistics.totalIncome || '0.00'}</div>
                </li>
                <li className="divider"></li>
                <li>
                  <div className="statistics-title">{id === '2' ? '累计还款金额' : '累计资金转出'}</div>
                  <div className="statistics-count amount-family">{statistics.totalExpense || '0.00'}</div>
                </li>
                <li className="divider"></li>
                <li>
                  <div className="statistics-title">{id === '2' ? '待结算净值' : '净转入金额'}</div>
                  <div className="statistics-count amount-family">{statistics.netAmount || '0.00'}</div>
                </li>
                <li className="divider"></li>
                <li>
                  <div className="statistics-title">最后更新时间</div>
                  <div className="statistics-count amount-family">{statistics.lastUpdatedTime || '-'}</div>
                </li>
              </ul>
            </div>
            <div className="asset-chart">
              <Chart data={chatData} />
            </div>
          </div>
          <div className="asset-list">
            <div className="asset-create-button" onClick={() => openCreateAccount()}>添加账户</div>
            {
              accountList.length > 0 ? (
                <div className="asset-list-content">
                  {
                    accountList.map(item => (
                      <div className="asset-list-item" onClick={() => navigate(`/account/${item.id}?assetId=${id}&assetName=${name}&accountName=${item.name}`)} key={item.id}>
                        <div className="asset-item-icon">
                          <Icon path={item.icon} width="24" height="24" fill="#333" />
                        </div>
                        <div className="asset-item-info">
                          <div className="asset-item-money amount-family">{id === '2' ? item.amount * -1 : item.amount}</div>
                          <div className="asset-item-name">
                            {item.name}
                            {
                              item.notes && <span className="asset-notes">({item.notes})</span>
                            }
                          </div>
                        </div>
                      </div>
                    ))
                  }
                </div>
              ) : (
                <div className="empty-wrap">
                  <EmptyIcon width="120" height="120" />
                  <p>暂无账户，点击<a href="#" onClick={(e) => {
                    e.preventDefault()
                    openCreateAccount()
                  }}>添加账户</a></p>
                </div>
              )
            }
          </div>
        </div>
      </div>
    </>
  )
}

export default Asset;